import React, { useEffect, useState } from 'react';
import { Button, Result, Spin } from 'antd';
import { useNavigate } from 'react-router-dom/dist';
import { fetchQueryOrderStatus } from '@/api/pay';
import usePay from '../usePay';

export default function AddCartSuccess() {
    const nav = useNavigate();
    const queryString = window.location.search;
    const orderId = new URLSearchParams(queryString).get('orderId') || '';
    const { payRes } = usePay({ orderId });
    function goBack() {
        nav('/');
    }
    function goCartList() {
        nav('/order');
    }
    function renderPayRes() {
        return payRes === 'pending' ? (
            <Result
                icon={<Spin tip="Loading" size="large"></Spin>}
                // status="success"
                extra={
                    <>
                        <Button type="primary" onClick={goBack}>
                            返回首页
                        </Button>
                        <Button type="primary" onClick={goCartList}>
                            去订单列表
                        </Button>
                    </>
                }
            />
        ) : payRes === 'success' ? (
            <Result
                status="success"
                title="支付成功"
                extra={
                    <>
                        <Button type="primary" onClick={goBack}>
                            返回首页
                        </Button>
                        <Button type="primary" onClick={goCartList}>
                            去订单列表
                        </Button>
                    </>
                }
            />
        ) : (
            <Result
                status="error"
                title="支付失败"
                extra={
                    <>
                        <Button type="primary" onClick={goBack}>
                            返回首页
                        </Button>
                        <Button type="primary" onClick={goCartList}>
                            去订单列表
                        </Button>
                    </>
                }
            />
        );
    }

    return renderPayRes();
}
